/**
 * Created by yhj on 2017/10/26.
 */

// import React,{Component,PropTypes} from 'react';
import React,{Component} from 'react';
import {View,Text,TouchableOpacity} from 'react-native';
import PropTypes from 'prop-types';
export default class timeButton extends Component {
    constructor(props) {
        super(props)
        this.state = {
            timerCount: this.props.timerCount || 60,
            timerTitle: this.props.timerTitle || '获取验证码',
            counting: false,
            selfEnable: true,
        };
        this.shouldStartCountting = this.shouldStartCountting.bind(this)
        this.countDownAction = this.countDownAction.bind(this)
    }
    static propTypes = {
        style: PropTypes.object,
        textStyle: Text.propTypes.style,
        onClick: PropTypes.func,
        disableColor: PropTypes.string,
        timerTitle: PropTypes.string,
        enable: PropTypes.oneOfType([PropTypes.bool,PropTypes.number])
        // enable: React.PropTypes.oneOfType([React.PropTypes.bool,React.PropTypes.number])
    };

    countDownAction(){
        const codeTime = this.state.timerCount;
        this.interval = setInterval(() =>{
            const timer = this.state.timerCount - 1
            if(timer===0){
                this.interval&&clearInterval(this.interval);
                this.setState({
                    timerCount: codeTime,
                    timerTitle: this.props.timerTitle || '获取验证码',
                    counting: false,
                    selfEnable: true
                })
            }
            else
            {
                console.log("---- timer ",timer);
                this.setState({
                    timerCount:timer,
                    // timerTitle: `(${timer}s)`,
                    timerTitle: `${timer}s`,
                    // timerTitle: `倒计时(${timer}s)`,
                })
            }
        },1000)
    }
    shouldStartCountting(shouldStart){
        if (this.state.counting) {return}
        if (shouldStart) {
            this.countDownAction()
            this.setState({counting: true,selfEnable:false})
        }else{
            this.setState({selfEnable:true})
        }
    }
    componentWillUnmount(){
        clearInterval(this.interval)
    }
    render(){
        const {onClick,style,textStyle,disableColor} = this.props;
        const {counting,timerTitle,selfEnable} = this.state;
        return (
            <TouchableOpacity activeOpacity={counting ? 1 : 1} onPress={()=>{
                if (!counting && selfEnable) {
                    this.setState({selfEnable:false})
                    this.shouldStartCountting(true);
                    this.props.onClick(this.shouldStartCountting)
                };
            }}>
                <View style={[{width:0.56*194,borderRadius:5,margin:15,height:0.56*70,backgroundColor:'#dcdcdc',flex:1,justifyContent:'center',alignItems:'center'},style]}>
                    <Text style={[{fontSize:15},textStyle,
                        {color: ((!counting  && selfEnable) ? textStyle.color : disableColor || '#939292')}]}
                    >{timerTitle}</Text>
                </View>
            </TouchableOpacity>
        )
    }
}

module.exports = timeButton;